<template>
  <div class="public">
    <!-- <span class="iconfont icon-wode"></span> -->
    <div class="footerNav">
      <router-link tag="div" to="/bookshop" class="item">
            <div class="iconfont icon-zhuye"></div>
            <div class="text">书城</div>
      </router-link>
      <router-link tag="div" to="/category" class="item" active-class="active">
             <div class="iconfont icon-fenlei"></div>
            <div class="text">分类</div>
      </router-link>
     
      <router-link tag="div" to="/bookrack" class="item">
             <div class="iconfont icon-shu"></div>
            <div class="text">书架</div>
      </router-link>
      <router-link tag="div" to="/my" class="item">
             <div class="iconfont icon-wode"></div>
            <div class="text">我的</div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  linkActiveClass: "active"
};
</script>

<style lang="less">
.public {
  .footerNav {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    position: fixed;
    left: 0;
    text-align: center;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 48px;
    justify-content: space-between;
   background-color: #f6f6f6;

    .item {
      width: 25%;
      color: #cbcbcb;
      .iconfont{
          font-size: 22px;
      }
      .text{
          font-size: 14px;
      }

      &.active{
      color: #474747;
    }
    }

    
  }
}
</style>